<template>
  <Container class="brand-list rebate-list">
    <div style="height:140px" class="container-header large" slot="header">
      <Form class="search">
        <Row>
          <Col span="8">
            <FormItem label="年份">
              <Select v-model="list.form.year" clearable>
                <Option
                  v-for="item in list.form.yearList"
                  :value="item.year"
                  :key="item.id"
                >{{item.year}}</Option>
              </Select>
            </FormItem>
            <FormItem label="经销商名称">
              <Input
                class="start"
                maxlength="13"
                v-model="list.form.distributorName"
                clearable
                placeholder="请输入经销商名称"
              />
            </FormItem>
            <FormItem label="省份">
              <AreaSelect v-model="list.form.provinceId" :onlyProvince="true"></AreaSelect>
              <!-- <AreaSelect :onlyProvince="true" @input="onSelectChange"></AreaSelect> -->
            </FormItem>
          </Col>

          <Col span="7">
            <FormItem label="科室">
              <Select v-model="list.form.departmentId" clearable filterable>
                <Option
                  v-for="item in list.form.officeList"
                  :value="item.departmentId"
                  :key="item.departmentId"
                >{{item.departmentName}}</Option>
              </Select>
            </FormItem>
            <FormItem label="老板名称">
              <Input class="storeNmae" v-model="list.form.linkMan" clearable placeholder="请输入老板名称"/>
            </FormItem>
            <FormItem label="门店名称">
              <Input class="storeNmae" v-model="list.form.storeName" clearable placeholder="请输入门店名称"/>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="门店类型">
              <Select v-model="list.form.storeTypeId" clearable filterable>
                <Option
                  v-for="item in list.form.storeType"
                  :value="item.storeTypeId"
                  :key="item.storeTypeId"
                >{{item.storeTypeName}}</Option>
              </Select>
            </FormItem>
            <FormItem label="老板电话">
              <Input class="storeNmae" v-model="list.form.telephone" clearable placeholder="请输入老板电话"/>
            </FormItem>
            <FormItem label="门店编号">
              <Input class="storeNmae" v-model="list.form.storeNo" clearable placeholder="请输入门店编号"/>
            </FormItem>
          </Col>
          <Col class-name="search" span="2">
            <Button
              class="btn-search large"
              type="primary"
              icon="ios-search"
              @click="onSearchBtnClick"
            ></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <export-btn 
        :param="exportParam" 
        url='/report/store_rebate_year_report/export'
        class="item" 
        slot="extra"></export-btn>
      <TabPane label="门店返利明细" name="tab1">
        <div class="lzb">
          <table class="lzb-table"  width="100%" border="1">
            <col align="center" width="380"/>
            <col align="center" :width="item.width" v-for="item in list.columns.slice(8)" :key="item.id"/>
            <tr>
              <td align="center" class="c" colspan="8">小计:共<span class="font-red">{{list.totalItem}}</span>条记录</td>
              <td width="200">{{list.statistics.totalLastYearRebate}}</td>
              <td>{{list.statistics.totalCurrentUsedRebate}}</td>
              <td>{{list.statistics.currentYearRebateTotal || 0}}</td>
              <td>{{list.statistics.currentYearInstallFreeTotal || 0}}</td>
              <td>{{list.statistics.totalCurrentRebate}}</td>
              <td>{{list.statistics.totalJanuaryRebate}}</td>
              <td>{{list.statistics.totalJanuaryUsedRebate}}</td>
              <td>{{list.statistics.totalJanuaryInstallFree}}</td>
              <td>{{list.statistics.totalFebruaryRebate}}</td>
              <td>{{list.statistics.totalFebruaryUsedRebate}}</td>
              <td>{{list.statistics.totalFebruaryInstallFree}}</td>
              <td>{{list.statistics.totalMarchRebate}}</td>
              <td>{{list.statistics.totalMarchUsedRebate}}</td>
              <td>{{list.statistics.totalMarchInstallFree}}</td>
              <td>{{list.statistics.totalAprilRebate}}</td>
              <td>{{list.statistics.totalAprilUsedRebate}}</td>
              <td>{{list.statistics.totalAprilInstallFree}}</td>
              <td>{{list.statistics.totalMayRebate}}</td>
              <td>{{list.statistics.totalMayUsedRebate}}</td>
              <td>{{list.statistics.totalMayInstallFree}}</td>
              <td>{{list.statistics.totalJuneRebate}}</td>
              <td>{{list.statistics.totalJuneUsedRebate}}</td>
              <td>{{list.statistics.totalJuneInstallFree}}</td>
              <td>{{list.statistics.totalJulyRebate}}</td>
              <td>{{list.statistics.totalJulyUsedRebate}}</td>
              <td>{{list.statistics.totalJulyInstallFree}}</td>
              <td>{{list.statistics.totalAugustRebate}}</td>
              <td>{{list.statistics.totalAugustUsedRebate}}</td>
              <td>{{list.statistics.totalAugustInstallFree}}</td>
              <td>{{list.statistics.totalSeptemberRebate}}</td>
              <td>{{list.statistics.totalSeptemberUsedRebate}}</td>
              <td>{{list.statistics.totalSeptemberInstallFree}}</td>
              <td>{{list.statistics.totalOctoberRebate}}</td>
              <td>{{list.statistics.totalOctoberUsedRebate}}</td>
              <td>{{list.statistics.totalOctoberInstallFree}}</td>
              <td>{{list.statistics.totalNovemberRebate}}</td>
              <td>{{list.statistics.totalNovemberUsedRebate}}</td>
              <td>{{list.statistics.totalNovemberInstallFree}}</td>
              <td>{{list.statistics.totalDecemberRebate}}</td>
              <td>{{list.statistics.totalDecemberUsedRebate}}</td>
              <td>{{list.statistics.totalDecemberInstallFree}}</td>
            </tr>
          </table>
        </div>
        <Table
          :height="options.tableHeight -10"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"
        ></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"
          ></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from "@/table";
import rebateListData from "./list/rebateListData";
import {
  clearEmpty,
  formatDate,
  formatCurrencyNum,
  formatOnlyYear
} from "@/util";
import AreaSelect from "@/components/AreaSelect";
export default {
  name: 'report/rebate/rebateList',
  components: {
    AreaSelect
  },
  data() {
    return {
      tab: "tab1",
      list: rebateListData,
      options: {
        tableHeight: 300
      }
    };
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1;
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize;
    this.initTable(50);
    this.$bus.$on("openDetail", this.openDetail);
    this.getData();
    this.setScroll()
  },
  created() {
    this.getStoreList();
    this.getOfficeList();
  },
  destroyed() {
    this.$bus.$off();
  },
  computed: {
    provinceId: {
      get() {
        return this.list.form.provinceId
      },
      set(v) {
        this.list.form.provinceId = v
      }
    }
  },
  methods: {
    ...table,
    setScroll() {
      let tar = document.querySelector('.lzb')
      let tarBottom = document.querySelector('.ivu-table-body')
      let distance = 0
      this.$nextTick(()=>{
        tar.addEventListener('scroll', ()=>{
          distance = tar.scrollLeft
          tarBottom.scrollLeft = distance
        })
      })
        this.$nextTick(()=>{
          tarBottom.addEventListener('scroll', ()=>{
            distance = tarBottom.scrollLeft
            tar.scrollLeft = distance
          })
      })
    },
    onSearchBtnClick() {
      this.list.currentPage = 1;
      this.getData();
    },
    getStoreList() {
      this.$ajaxGet("storeType/findAll").then(data => {
        this.list.form.storeType = data.map(item => {
          let obj = { storeTypeId: item.id, storeTypeName: item.name };
          return obj;
        });
      });
    },
    getOfficeList() {
      this.$jsonPost("/department/listDepartmentTree").then(res => {
        this.list.form.officeList = res.map(item => {
          let obj = { departmentId: item.id, departmentName: item.name };
          return obj;
        });
      });
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        year: this.list.form.year,
        distributorName: this.list.form.distributorName,
        provinceId: this.list.form.provinceId,
        departmentId: this.list.form.departmentId,
        linkMan: this.list.form.linkMan,
        storeName: this.list.form.storeName,
        storeTypeId: this.list.form.storeTypeId,
        telephone: this.list.form.telephone,
        storeNo: this.list.form.storeNo
      };
      param = clearEmpty(param);
      this.list.status = "loading";
      this.$ajaxGet("/report/store_rebate_year_report/page", param)
        .then(data => {
          this.list.data = [];
          this.list.totalItem = Number(data.total);
          this.list.data = data.records || [];
          this.list.statistics = data.statistics || []
          this.list.status = "pass";
        })
        .catch(() => {
          this.list.status = "error";
        });
    },
    openDetail(row) {
      row.title = row.storeName;
      this.$router.push({
        name: "report/rebate/edit",
        query: {
          storeId: row.storeId,
          id: row.id,
          year: formatOnlyYear(new Date()),
          title: JSON.stringify(row.storeName)
        }
      });
    },
    onSelectChange(val) {
      if (val) {
        let obj = {
          provinceId: val,
          isPage: false
        };
        this.form.provinceId = val;
      } else {
        this.form.provinceId = "";
      }
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.$router.push({
				name: 'report/rebate/rebateList',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.$router.push({
				name: 'report/rebate/rebateList',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    }
  },
  watch: {
    $route() {
      let page = ~~this.$route.query.currentPage;
      let table = this.list;
      if (table.currentPage !== page) {
        table.currentPage =
          ~~this.$route.query.currentPage === 0
            ? 1
            : ~~this.$route.query.currentPage;
        this.getData();
      }
    }
  },
  computed: {
    exportParam() {
      let params = {
        year: this.list.form.year,
        distributorName: this.list.form.distributorName,
        provinceId: this.list.form.provinceId,
        departmentId: this.list.form.departmentId,
        linkMan: this.list.form.linkMan,
        storeName: this.list.form.storeName,
        storeTypeId: this.list.form.storeTypeId,
        telephone: this.list.form.telephone,
        storeNo: this.list.form.storeNo
      }
      return clearEmpty(params)
    }
  }
};
</script>
